// http://localhost:3000/Blackhole
import React, { useCallback, useMemo } from 'react';
import { Route, Switch, useRouteMatch } from 'react-router-dom';
import { useWallet } from 'use-wallet';

import Button from '../../components/Button';
import Page from '../../components/Page';
import PageHeader from '../../components/PageHeader';
import ExchangeCard from './components/ExchangeCard';
import styled from 'styled-components';
import Spacer from '../../components/Spacer';
import useBondStats from '../../hooks/useBondStats';
import useBasisCash from '../../hooks/useBasisCash';
import useBondOraclePriceInLastTWAP from '../../hooks/useBondOraclePriceInLastTWAP';
import { useTransactionAdder } from '../../state/transactions/hooks';
import config from '../../config';
import LaunchCountdown from '../../components/LaunchCountdown';
import ExchangeStat from './components/ExchangeStat';
import useTokenBalance from '../../hooks/useTokenBalance';
import { getDisplayBalance } from '../../utils/formatBalance';
import banner_blackhole from '../../assets/image/banner_blackhole.png';
import h5banner_blackhole from '../../assets/image/h5banner_blackhole.png'; 

const Bond: React.FC = () => {
  const { path } = useRouteMatch();
  const { account, connect } = useWallet();
  const basisCash = useBasisCash();
  const addTransaction = useTransactionAdder();
  const bondStat = useBondStats();
  const cashPrice = useBondOraclePriceInLastTWAP();

  const bondBalance = useTokenBalance(basisCash?.SNB);

  const handleBuyBonds = useCallback(
    async (amount: string) => {
      const tx = await basisCash.buyBonds(amount);
      const bondAmount = Number(amount) / Number(getDisplayBalance(cashPrice));
      addTransaction(tx, {
        summary: `Buy ${bondAmount.toFixed(2)} SNB with ${amount} sCASH`,
      });
    },
    [basisCash, addTransaction, cashPrice],
  );

  const handleRedeemBonds = useCallback(
    async (amount: string) => {
      const tx = await basisCash.redeemBonds(amount);
      addTransaction(tx, { summary: `Redeem ${amount} SNB` });
    },
    [basisCash, addTransaction],
  );
  const cashIsOverpriced = useMemo(() => cashPrice.gt(1.0), [cashPrice]);
  const cashIsUnderPriced = useMemo(() => Number(bondStat?.priceInDAI) < 1.0, [bondStat]);

  const isLaunched = Date.now() >= config.boardroomLaunchesAt.getTime();
  if (!isLaunched) {
    return (
      <Switch>
        <Page>
          {/* <PageHeader
            icon={
              <img
                src={banner_blackhole}
                alt='logo'
                width={1920}
              />
            }
            title=""
            subtitle=""
          /> */}
          <StyleDiv1>
        <img
          src={banner_blackhole}
          alt='logo'
          style={{width: '100%', height: 'auto'}}
        />
      </StyleDiv1>
      <StyleDiv2>
        <img
          src={h5banner_blackhole}
          alt='logo'
          style={{width: '100%', height: 'auto'}}
        />
      </StyleDiv2>
          
          <LaunchCountdown
            deadline={config.boardroomLaunchesAt}
            description="Expansion in"
            descriptionLink=""
          />
        </Page>
      </Switch>
    );
  }
  return (
    <Switch>
      <Page>
        {!!account ? (
          <>
            <Route exact path={path}>
              {/* <PageHeader
                icon={
                  <img
                    src={banner_blackhole}
                    alt='logo'
                    width={1920}
                  />
                }
                title=""
                subtitle=""
              /> */}
              <StyleDiv1>
        <img
          src={banner_blackhole}
          alt='logo'
          style={{width: '100%', height: 'auto'}}
        />
      </StyleDiv1>
      <StyleDiv2>
        <img
          src={h5banner_blackhole}
          alt='logo'
          style={{width: '100%', height: 'auto'}}
        />
      </StyleDiv2>
            </Route>
            <StyledBond>
              <StyledCardWrapper>
                <ExchangeCard
                  action="Purchase"
                  fromToken={basisCash.sCASH}
                  fromTokenName="Super Nova"
                  toToken={basisCash.SNB}
                  toTokenName="Basis Bond"
                  priceDesc={
                    cashIsOverpriced
                      ? 'sCASH is over $1'
                      : cashIsUnderPriced
                        ? `${Math.floor(
                          100 / Number(bondStat.priceInDAI) - 100,
                        )}% return when sCASH > $1`
                        : '-'
                  }
                  onExchange={handleBuyBonds}
                  disabled={!bondStat || cashIsOverpriced}
                />
              </StyledCardWrapper>
              <StyledStatsWrapper>
                <ExchangeStat
                  tokenName="sCASH"
                  description="Base Price (Last-Day TWAP)"
                  price={getDisplayBalance(cashPrice, 18, 2)}
                />
                <Spacer size="md" />
                <ExchangeStat
                  tokenName="SNB"
                  description="Current Price: (sCASH)^2"
                  price={bondStat?.priceInDAI || '-'}
                />
              </StyledStatsWrapper>
              <StyledCardWrapper>
                <ExchangeCard
                  action="Redeem"
                  fromToken={basisCash.SNB}
                  fromTokenName="Basis Bond"
                  toToken={basisCash.sCASH}
                  toTokenName="Super Nova"
                  priceDesc={`${getDisplayBalance(bondBalance)} SNB`}
                  onExchange={handleRedeemBonds}
                  disabled={!bondStat || bondBalance.eq(0) || cashIsUnderPriced}
                />
              </StyledCardWrapper>
            </StyledBond>
          </>
        ) : (
            <div
              style={{
                alignItems: 'center',
                display: 'flex',
                flex: 1,
                justifyContent: 'center',
              }}
            >
              <Button onClick={() => connect('injected')} text="Unlock Wallet" />
            </div>
          )}
      </Page>
    </Switch>
  );
};

const StyleDiv1 = styled.div`
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  z-index: -1;
  padding-bottom: 20px;
  @media (max-width: 768px) {
    display: none;
  }
`

const StyleDiv2 = styled.div`
  display: none;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  z-index: -1;
  margin-top: -70px;
  @media (max-width: 768px) {
    display: block;
  }
`

const StyledBond = styled.div`
  display: flex;
  width: 900px;
  @media (max-width: 768px) {
    width: 100%;
    flex-flow: column nowrap;
    align-items: center;
  }
`;

const StyledCardWrapper = styled.div`
  display: flex;
  flex: 1;
  flex-direction: column;
  @media (max-width: 768px) {
    width: 80%;
  }
`;

const StyledStatsWrapper = styled.div`
  display: flex;
  flex: 0.8;
  margin: 0 20px;
  flex-direction: column;

  @media (max-width: 768px) {
    width: 80%;
    margin: 16px 0;
  }
`;

export default Bond;
